<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="dbx">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待办箱
        </span>

        <div v-if="tabActiveName == 'dbx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input v-model="listQuery.projectName" placeholder="项目名称" />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="流程环节">
                <el-select
                  @change="changePage(1)"
                  placeholder="流程环节"
                  v-model="listQuery.feasiblePlanProcess"
                >
                  <el-option
                    v-for="(item, index) in processData"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="biaojiLine">
            <div class>时限图例：</div>
            <div class="daibanBox-tag-right">
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox1"></div>
                <div class="biaoshiBoxText">正常</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox2"></div>
                <div class="biaoshiBoxText">预警</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox3"></div>
                <div class="biaoshiBoxText">警告</div>
              </div>
              <div class="biaoshiItem">
                <div class="biaoshiBox biaoshiBox4"></div>
                <div class="biaoshiBoxText">超期</div>
              </div>
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            highlight-current-row
          >
            <el-table-column width="90" label="时限">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.postponeType == 'NORMAL'"
                  type="info"
                  effect="dark"
                  size="mini"
                >{{ scope.row.postponeDay }}天</el-tag>
                <el-tag
                  style="border: 1px solid #FFD242;"
                  v-else-if="scope.row.postponeType == 'EARLY_WARNING'"
                  color="#FFD242"
                  effect="dark"
                  size="mini"
                >{{ scope.row.postponeDay }}天</el-tag>
                <el-tag
                  v-else-if="scope.row.postponeType == 'WARNING'"
                  type="warning"
                  effect="dark"
                  size="mini"
                >{{ scope.row.postponeDay }}天</el-tag>
                <el-tag
                  v-else-if="scope.row.postponeType == 'ULTRA_TIME'"
                  type="danger"
                  effect="dark"
                  size="mini"
                >{{ scope.row.postponeDay }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="projectNum" label="业务编号"></el-table-column>
            <el-table-column prop="projectType" label="项目类型"></el-table-column>
            <el-table-column prop="projectLevelName" label="项目级别"></el-table-column>
            <el-table-column prop="projectName" label="项目名称"></el-table-column>
            <el-table-column prop="processName" label="流程环节"></el-table-column>
            <el-table-column prop="lastSubmitTime" label="上一流程提交时间"></el-table-column>
            <el-table-column prop="submitter" label="提交人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <router-link
                  v-if="scope.row.processValue == 'PROJECT_DISTRIBUTE'"
                  :to="{ path: '/xmkgh/xmspread' }"
                >
                  <el-button size="mini" type="primary">办理</el-button>
                </router-link>
                <a v-else @click="handleSaveData(scope.row, 1)">
                  <el-button size="mini" type="primary">办理</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              @current-change="changePage"
              :page-size="listQuery.size"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="ybx">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已办箱
        </span>
        <div v-if="tabActiveName == 'ybx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input v-model="listQuery.projectName" placeholder="项目名称" />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="流程环节">
                <el-select
                  @change="changePage(1)"
                  placeholder="流程环节"
                  v-model="listQuery.feasiblePlanProcess"
                >
                  <el-option
                    v-for="(item, index) in processData"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            highlight-current-row
          >
            <el-table-column prop="projectNum" label="业务编号"></el-table-column>
            <el-table-column prop="projectType" label="项目类型"></el-table-column>
            <el-table-column prop="projectLevelName" label="项目级别"></el-table-column>
            <el-table-column prop="projectName" label="项目名称"></el-table-column>
            <el-table-column prop="processName" label="流程环节"></el-table-column>
            <el-table-column label="已办流程">
              <template slot-scope="scope">
                <el-button
                  style="margin-right: 10px;"
                  size="mini"
                  type="primary"
                  @click="
                    handleShowProcess(
                      scope.row.finishedProcess,
                      scope.row.projectId
                    )
                  "
                >查看流程</el-button>
                <router-link
                  v-if="scope.row.processValue == 'PROJECT_DISTRIBUTE'"
                  :to="{ path: '/xmkgh/xmspread' }"
                >
                  <el-button size="mini" type="primary">查看</el-button>
                </router-link>
                <a v-else @click="handleSaveData(scope.row, 2)">
                  <el-button size="mini" type="primary">查看</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              @current-change="changePage"
              :page-size="listQuery.size"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :close-on-click-modal="false" :append-to-body="false" width="50%" title="已办流程" :visible.sync="dialog">
      <optionList :optionList="optionListData" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getWaitList,
  getAlreadyList,
  getProcessData,
  getProjectDealBusiness
} from '@/api/project/xmkgh/ywdeal'
import { getToken } from '@/utils/auth'
import config, { handleTwoPhaseJumpRoute } from '@/config'
import optionList from '@/components/optionList'

export default {
  components: {
    optionList
  },
  data() {
    return {
      list: [],
      total: 0,
      optionListData: [],
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        number: null,
        feasiblePlanProcess: 'ALL_PROCESS', // 可研规划阶段流程
        dealType: null // 项目办理环节
        // implementProcess: null // 实施阶段流程
      },
      tabActiveName: 'dbx',
      processData: [],
      processData1: [],
      processData2: [],
      baseUrl: config.baseUrl,
      userInfo: '', //用户信息
      finishedProcess: [],
      dialog: false
    }
  },
  methods: {
    fetchData() {
      this.listLoading = true
      let fun = null
      if (this.tabActiveName == 'dbx') {
        this.listQuery.dealType = 'WAIT_DEAL'
      } else if (this.tabActiveName == 'ybx') {
        this.listQuery.dealType = 'ALREADY_DEAL'
      }
      getProjectDealBusiness(this.listQuery)
        .then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
        .catch(err => {
          this.listLoading = false
        })
    },
    changePage(page) {
      this.listQuery.page = page
      this.fetchData()
    },
    getProcessData(callback) {
      getProcessData({
        processType: 'FEASIBLE_PLAN'
      }).then(res => {
        this.processData = res.data
        this.processData1 = res.data
        let arr = JSON.parse(JSON.stringify(res.data))
        arr.forEach((item, index) => {
          if (item.code == 'PROJECT_CONFIRM_PACKAGE') {
            arr.splice(index, 1)
          }
        })
        this.processData2 = arr
        // this.listQuery["feasiblePlanProcess"] = this.processData[0].code;
        // callback();
      })
    },
    handleTabClick(tab, event) {
      if (this.tabActiveName == 'dbx') {
        this.processData = this.processData1
      } else {
        this.processData = this.processData2
      }

      if (this.tabActiveName != 'tzx') {
        this.clearListQuery()
        this.changePage(1)
      }
    },
    clearListQuery() {
      this.listQuery['projectName'] = null
      this.listQuery['number'] = null
      this.listQuery['feasiblePlanProcess'] = this.processData[0].code
    },
    handleShowProcess(arr, id) {
      this.finishedProcess = arr
      this.dialog = true
      localStorage.setItem('projectId', id)
    },
    handleSaveData(row, num) {
      localStorage.setItem('lookStatus', num)
      localStorage.setItem('router', row.processValue)
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem('menusName', this.userInfo.roleList[0].code)
      } else {
        this.$alert('暂无权限', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/login')
          }
        })
      }
      localStorage.setItem('userId', this.userInfo.userId)
      localStorage.setItem('projectId', row.projectId)
      localStorage.setItem('projectName', row.name)
      handleTwoPhaseJumpRoute()
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo
    this.getProcessData()
    this.fetchData()
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
.biaojiLine {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  color: #333;
  background-color: rgb(241, 243, 247);
  margin-bottom: 12px;
  padding-left: 22px;
  font-size: 14px;
}
.daibanBox-tag-right {
  display: flex;
  align-items: center;
}
.biaoshiItem {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .biaoshiBox {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
  }
  .biaoshiBox.biaoshiBox1 {
    background-color: #909399;
  }
  .biaoshiBox.biaoshiBox2 {
    background-color: rgb(255, 210, 66);
  }
  .biaoshiBox.biaoshiBox3 {
    background-color: #e6a23c;
  }
  .biaoshiBox.biaoshiBox4 {
    background-color: #f56c6c;
  }
  .biaoshiBoxText {
    font-size: 12px;
    margin-left: 5px;
    line-height: 15px;
  }
}
.biaoshiItem:last-child {
  margin-right: 0;
}
</style>
